<template>
  <div class="Collect">
    <Row>
      <!-- 标题 -->
      <Col span="23" style="margin-top:10px;margin-left:20px">
      <Divider>
        <h1>我的收藏</h1>
      </Divider>
      </Col>
      <Col span="23" style="margin-top:10px;margin-left:20px">
      <!-- 顶部按钮和分页 -->
      <Row>
        <Col span='22' style="margin-bottom:10px">
        <Select style="width:100px;margin-left:35px" size='small' @on-change='changeSort' placeholder="时间排序">
          <Option v-for="sorts in sortstyle" :value="sorts.value" :key="sorts.value">{{sorts.label}}</Option>
        </Select>
        </Col>
        <Col span="1" v-if="isSelect">
        <Button type="error" @click="btnActiondelete">
          取消收藏
        </Button>
        </Col>
      </Row>
      </Col>
      <!-- 表格 -->
      <Col span="24" style="margin-top:10px">
      <template>
        <Table :columns='collectTableTitle' :data='collectData' border size='large' @on-selection-change='selectionCollect'></Table>
      </template>
      </Col>
      <Col span="24" style="margin-top:20px;margin-bottom:20px;margin-left:500px">
      <Page :current="this.page" :total="parseInt(this.total)" simple :page-size='this.limit' @on-change='changePage' />
      </Col>
    </Row>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        //存放被选择的表格数据
        selection: "",

        //判断表格选择框是否被选择
        isSelect: false,

        //选择排序方式
        sortstyle: [
          {
            label: '时间排序',
            value: '时间排序'
          },
          {
            label: '星级排序',
            value: '星级排序'
          },
        ],

        //表格排序方式
        sort: 0,

        //请求接口
        url: {
          collectProject: this.$Global.url.collectProject,
          userCollect: this.$Global.url.userCollect
        },

        //表格信息
        collectTableTitle: [
          {
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title: "方案名称",
            key: "titleName"
          },
          {
            title: "特点",
            key: "feature",
            align: "center",
            render: this.renderFeature
          },
          {
            title: "功能",
            key: "function",
            align: "center",
            render: this.renderFunctions
          },
          {
            title: "推荐星数",
            align: "center",
            key: "recommend",
            render: this.renderRate
          },
          {
            title: "图片",
            key: "icon",
            align: "center",
            render: this.renderPicture
          },
          {
            title: "查看详情",
            key: "action",
            width: 150,
            align: "center",
            render: this.renderDetailInfo
          }
        ],

        //存储用户收藏的数据
        collectData: [
          {
            feature: [],
            icon: "",
            titleName: "",
            function: [],
          }
        ],



        //表格分页信息
        limit: 10,
        total: '',
        page: 1,
      };
    },

    /**
     * 页面入口
     */
    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.collectProject =
          this.$Global.url.baseUrl + this.$Global.url.collectProject;
        this.url.userCollect =
          this.$Global.url.baseUrl + this.$Global.url.userCollect;
      }
      this.getCollectData();
    },

    /**
     * 方法
     */
    methods: {
      /***********************获取数据******************/
      /**
       * 获取用户的收藏信息
       */
      getCollectData() {
        this.$http
          .get(this.url.collectProject)
          .then(res => {
            // console.log('collectData');
            //    console.log(res.data.data);
            if (res.status == 200) {
              //  console.log('collectData');
              //  console.log(res.data.data);

              //对获取到的数据进行处理,先是反转数组,让他以时间正序排序,然后取其中 limit 个展示出来.
              this.collectData = res.data.data;
              // console.log(Array.isArray(this.collectData))
              this.sortData()
              // console.log(this.collectData);
              this.limitData()
              // console.log('collectData');
              // console.log(this.collectData);

              // this.collectData.reverse();
              // var arraa = ['one','two','three']
              // console.log(arraa);
              // arraa.reverse();
              // console.log('arraa');
              // console.log(arraa);
              this.total = res.data.data.length;
              // console.log(this.total)

            }
          })
          .catch(error => console.log(error));
      },

      /***********************表格渲染******************/
      /**
       * 显示方案特点
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderFeature(h, params) {
        return h(
          "Poptip",
          {
            props: {
              trigger: "hover",
              title: "方案特点",
              placement: "bottom"
            }
          },
          [
            h("Tag", { props: { color: "orange" } }, "查看方案特点"),
            h("div", { slot: "content" }, [
              h(
                "ul",
                this.collectData[params.index].feature.map(item => {
                  return h(
                    "li",
                    { style: { textAlign: "left", padding: "4px" } },
                    item
                  );
                })
              )
            ])
          ]
        );
      },
      /**
       * 显示方案功能
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderFunctions(h, params) {
        return h(
          "Poptip",
          {
            props: {
              trigger: "hover",
              title: "功能",
              placement: "bottom"
            }
          },
          [
            h("Tag", { props: { color: "orange" } }, "查看方案功能"),
            h("div", { slot: "content" }, [
              h(
                "ul", this.collectData[params.index].function.map(item => {
                  return [h("li", { style: { textAlign: "left", padding: "4px" } }, item)];
                })
              )
            ])
          ]
        );
      },
      /**
       * 渲染出表格里的图片
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderPicture(h, params) {
        return h("Poptip", { props: { trigger: "hover", placement: "bottom" } }, [
          h("Tag", { props: { color: "magenta" } }, "查看图片"),
          h("div", { slot: "content" }, [
            h("img", { attrs: { src: this.collectData[params.index].icon } })
          ])
        ]);
      },

      /**
       * 渲染表格里的按钮
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderDetailInfo(h, params) {
        return h("div", [
          h(
            "Button",
            {
              props: {
                type: "primary",
                size: "small"
              },
              style: {
                marginRight: "5px"
              },
              on: {
                click: () => {
                  this.btnActionDetail(params.index);
                }
              }
            },
            "查看详细信息"
          )
        ]);
      },

      /**
       * 在表格里渲染出星级评分
       * @param {表格封装好的参数,能够指向每一行每一列} params
       */
      renderRate(h, params) {
        return h("div", [
          h("Rate", {
            props: {
              count: 5,
              value: this.collectData[params.index].recommend,
              disabled: true
            }
          })
        ]);
      },

      /**
       * 查看方案详情
       * @param {指向当前行} index
       */
      btnActionDetail(index) {
        var param = {
          projectid: this.collectData[index].project_id
        };
        this.$router.push({ name: "ProjectDetailInfo", params: param });
      },
      /*********************************取消收藏******************************* */
      /**
       * 选择表格数据
       * @param {由表格自带的事件处理回调函数返回的值,表示的是当前被选中的数据} selection
       */
      selectionCollect(selection) {

        this.selection = selection;
        if (this.selection.length != 0) {
          this.isSelect = true;
        } else {
          this.isSelect = false;
        }
      },

      /**
       * 取消收藏
       */
      btnActiondelete() {
        //并发请求
        var urlArray = new Array();
        for (let i = 0; i < this.selection.length; i++) {
          urlArray.push({ _id: this.selection[i]._id })
        }
        var requests = urlArray.map(this.makeQuest);
        this.$http.all(requests).then(res => {
          if (res.every(this.isSuccess)) {
            this.$Message.success('取消收藏成功');
            this.getCollectData();
          }
        }).catch(error => console.log(error));
      },
      /**
       * 生成并发请求的链接
       */
      makeQuest(params) {
        // console.log(params)
        return this.$http.post(this.url.userCollect, params)
      },
      /**
       * 检查是否取消成功
       */
      isSuccess(res) {
        // console.log(res.status)
        return res.status == 200;
      },

      /***************************************表格排序************************************/
      /**
       * 选择排序方式
       */
      changeSort(val) {
        // console.log(val)
        this.page = 1
        if (val === '星级排序') {
          this.sort = 1
        }
        else {
          this.sort = 0
        }
        this.getCollectData();
      },

      /**
       * 对数据进行排序
       */
      sortData() {
        if (this.sort === 0) {
          this.collectData.reverse();
        }
        else {
          this.collectData.sort(function (a, b) {
            if (a.recommend - b.recommend < 0) {
              return 1;
            }
            if (a.recommend - b.recommend > 0) {
              return -1;
            }
            return 0;
          })
        }
      },

      /*******************************************表格分页*********************************** */
      /**
       * 限制每页只显示 10 个数据
       */
      limitData() {
        var begin = (this.page - 1) * this.limit;
        var end = begin + this.limit;
        this.collectData = this.collectData.slice(begin, end);
        // console.log(this.collectData);
      },

      /**
       * 切换页数
       * @param {事件返回的参数,表示当前页} page
       */
      changePage(page) {
        this.page = page
        this.getCollectData()
      },
    }
  };
</script>